<template>
  <div>
    <el-button type="primary" :icon="Plus" :disabled="!categoryStore.category3Id" @click="showAddSpuForm">添加SPU</el-button>
    <el-table border :data="spuList" style="margin:10px 0;">
      <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          
          <el-tooltip class="box-item" effect="dark" content="添加SKU" placement="top">
            <el-button size="small" type="primary" :icon="Plus" @click="toAddSkuInfo(row)"></el-button>
          </el-tooltip>

          <el-tooltip class="box-item" effect="dark" content="修改SPU" placement="top">
            <el-button size="small" type="primary" :icon="Edit" @click="toEditSpuInfo(row)"></el-button>
          </el-tooltip>
          
          <el-tooltip class="box-item" effect="dark" content="查看SKU" placement="top">
            <el-button size="small" type="info" :icon="InfoFilled" @click="toCheckSkuList(row)"></el-button>
          </el-tooltip>

          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF" title="真的确定要删除此条数据么?" @confirm="deleteSpuInfo(row.id)">
            <template #reference>
              <el-button size="small" title="删除SPU" type="danger" :icon="Delete"></el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3,5,7,10,15]" :small="small" :disabled="disabled" :background="background" layout=" prev, pager, next, jumper,->,sizes,total " :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 查看sku列表数据 对话框布局 -->
    <el-dialog v-model="skuTableVisible" title="查看sku数据列表">
    <el-table :data="skuList">
      <el-table-column property="skuName" label="名称" width="150" />
      <el-table-column property="price" label="价格(元)" width="200" />
      <el-table-column property="weight" label="重量(KG)" />
      <el-table-column label="默认图片" >
        <template v-slot="{row}">
          <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg" />
        </template>
      </el-table-column>>
    </el-table>
  </el-dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SpuList'
};
</script>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue';
import { useCategoryListStore } from '@/stores/categoryList';
import { reqDeleteSpuInfo, reqGetSpuListData } from '@/api/product/spu';
import { ShowStatus } from '../types';
import { ElMessage } from 'element-plus';
import { reqGetSkuListData } from '@/api/product/sku';
const categoryStore = useCategoryListStore();
const currentPage = ref(1);
const pageSize = ref(3);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref<number>(0);


const loading = ref(true);

// 弹出对话框时用到的相关数据
const dialogFormVisible = ref(false);
const formLabelWidth = '90px';

const spuList = ref([]);
const skuTableVisible = ref(false)
const skuList = ref([])

// 接收传递过来的自定义事件
const emits = defineEmits(['setShowStatus','getSpuInfo']);

// 1. 定义一个获取SPU列表项的函数
const getSpuListData = async () => {
  const result = await reqGetSpuListData(currentPage.value, pageSize.value, categoryStore.category3Id as number);
  // console.log('rr',result)
  // 数据请求回来了要进行相应的赋值
  spuList.value = result.records;
  total.value = result.total;
};

// 2. 监听三级导航分类
watch(
  () => categoryStore.category3Id,
  category3Id => {
    if (!category3Id) {
      spuList.value = [];
      return;
    }

    // 有值的时候 才需要发送请求 获取spu列表数据
    getSpuListData();
  },
  { immediate: true }
);

// 3. 当单击页码时 改变页码
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  currentPage.value = val;

  // 重新发送请求 获取数据渲染页面
  getSpuListData();
};

// 4. 每页显示的数量
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pageSize.value = val;
  // 还应该从第1页开始显示
  currentPage.value = 1;

  getSpuListData();
};

// 5. 实现添加SpuForm页面的切换
const showAddSpuForm = () => {
  emits('setShowStatus', ShowStatus.ADD_SPU);

  // 添加SpuInfo时，清空原来的旧值
  emits('getSpuInfo', {})
};

// 6. 删除SpuInfo
const deleteSpuInfo = async (id: number) => {
  // 6.1 发送请求 删除对应的spuInfo
  await reqDeleteSpuInfo(id);

  // 6.2 提示删除成功
  ElMessage({
    type: 'success',
    message: '删除当前的spu成功...'
  });

  getSpuListData();
};

// 7. 编辑SpuInfo 之数据回显 先使用自定义事件将数据传递给父组件
const toEditSpuInfo = (row) => {
  // 7.1 将数据传递给父组件
  emits('getSpuInfo', row)

  // 7.2 将页面切回SpuList页面
  emits('setShowStatus',ShowStatus.ADD_SPU)
}

// 8. 添加skuInfo时的对应函数
const toAddSkuInfo = (row) => {
  emits('setShowStatus', ShowStatus.ADD_SKU)

  emits('getSpuInfo',row)
}

// 9. 根据spuId来查询对应的skuList数据
const toCheckSkuList =async (row) => {
  const result = await reqGetSkuListData(row.id)
  // console.log('sku',result)
  skuList.value = result 
  // 显示对话框
  skuTableVisible.value = true
}
</script>
<style>
</style>